<template>
    <div class="app-dsg-works">
        <ul class="works-list">
            <li class="works-item" v-for="item in dataSource" :key="item.id" @click="readDetail(item)">
                <div class="image" v-lazy:background-image="item.coverUrl">
                    <span class="tag">{{item.worksType === 1 ? '作品' : '文章'}}</span>
                </div>
                <div class="name">{{item.title}}</div>
                <div class="desc">{{item.description}}</div>
                <div class="author" v-if="!hide">
                    <img v-if="item.headimgurl" :src="item.headimgurl" alt="">
                    <img v-else src="@/assets/img/avatar.png" alt="">
                    {{item.userName}}
                    <time>{{item.createTime}}</time>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        dataSource: Array,
        hide: Boolean,
    },
    data(){
        return {
            
        }
    },
    methods: {
        readDetail(item){
            console.log(item)
            if(item.worksType === 1){
                localStorage.worksImageDetail = JSON.stringify(item)
                this.$router.push({name: 'worksImageDetail', params: {id: item.id}})
            }else{
                localStorage.worksArticleDetail = JSON.stringify(item)
                this.$router.push({name: 'worksArticleDetail', params: {id: item.id}})
            }
            
        }
    },
    created(){
        
    }
}
</script>


<style lang="less">
.app-dsg-works{
    .works-list{
        padding: 15px;
        .works-item{
            margin-bottom: 30px;
            .image{
                position: relative;
                border-radius: 10px;
                overflow: hidden;
                padding-bottom: 75%;
                background-repeat: no-repeat;
                background-position: center  center;
                background-size: cover;
                .tag{
                    position: absolute;
                    top: 20px;
                    left: 0;
                    font-size: 12px;
                    padding: 2px 4px;
                    border-radius: 0 4px 4px 0;
                    background-color: #eac02b;
                }
            }
            .name{
                 margin:10px 0;
                 font-size: 15px;
            }
            .desc{
                font-size: 12px;
                color: #999;
                line-height: 1.6;
            }
            .author{
                margin-top: 10px;
                font-size: 12px;
                img{
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 5px;
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    overflow: hidden;
                }
                time{
                    float: right;
                    color: #999;
                    line-height: 24px;
                }
            }
        }
    }
}
</style>

